
<template>
  <div class="userInfo-main">
    <mt-field label="买家ID" disabled v-model="form.id"></mt-field>
      <mt-field label="买家名称" disabled v-model="form.name"></mt-field>
      <mt-field label="手机号码" disabled v-model="form.mobile"></mt-field>
      <mt-field label="QQ号码"  v-model="form.qq"></mt-field>
      <mt-field label="微信号" v-model="form.weixin"></mt-field>
      <mt-button class="save-btn" type="danger" size="large" @click.native="saveUserInfo">保存</mt-button>
    <index-footer></index-footer>
  </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  import {userService,baseService} from '#/service'
  import IndexFooter from '@/components/base/IndexFooter'
  export default {
    name: 'userInfo',
    data(){
      return {
        form: {}
      }
    },
    created(){
      this.getUserInfo();
    },
    methods:{
      ...mapActions([
        'saveUserInfo'
      ]),
      getUserInfo() {
        userService.personInfo({
          success:(res)=>{
            if(res.code===0){
              const { id, name, mobile, qq, weixin } = res.data
              this.form = {
                id, name, mobile, qq, weixin
              }
            }
          }
        })
      },
      abort(arr){
        //未绑定
        if(arr.length<1) return -1
        for(let i=0;i<arr.length;i++){
          if(arr[i].approve!==1){
            return arr[i].approve
          }
        }
        return 1
      },
      color(status){

        if(status===1){
          return '#4097FF'
        }
        return 'red'
      },
      async loginOut(){
        await baseService.exist({
          success:()=>{
            this.$router.push({
              name:'login'
            })
            setTimeout(()=>{
              this.saveUserInfo(null);
            },300)
          }
        })
      },
      saveUserInfo () {
        userService.register({
          data:this.form,
          success:(res)=>{
            this.$toast({
              message: '保存成功',
              position: 'middle',
              duration: 2000
            });
            this.getUserInfo()
          }
        })
      }
    },
    computed:{
      ...mapGetters([
        'user'
      ]),
    },
    components:{
      IndexFooter
    }
  }
</script>

<style>
  html,body{
    background: #f5f5f5;
  }
  .userInfo-main{
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin-top: 0.1rem;
  }
  .userInfo-main .userInfo-main-ul li{
    width: 100%;
    height: 0.42rem;
    border-bottom: 0.01rem solid #e6e6e6;
    background: white;
  }
  .userInfo-main ul .user-top{
    margin-top: 0.05rem;
    height: 0;
  }
  .userInfo-box{
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
  }
  .userInfo-main-left{
    float:left;
  }
  .userInfo-main-left span{
    display: block;
    float: left;
    margin-right: 0.1rem;
    color: #333;
    font-size: 0.14rem;
    line-height: 0.4rem;
  }
  .userInfo-main-left .user-must a{
    display: inline-block;
    float: left;
  }
  .userInfo-main-left .user-must a:last-child{
    color: #4097ff;
  }
  .userInfo-main-left span:first-child{
    width: 0.24rem;
    height: 0.24rem;
    margin-top: 0.08rem;
  }
  .userInfo-main-left span:first-child img{
    width: 100%;
    height: 100%;
    display: block;
  }
  .userInfo-main-left span:last-child{
    margin-right: inherit;
  }
  .userInfo-main-right{
    float: right;
    color: #b2b6b7;
    font-size: 0.12rem;
    line-height: 0.4rem;
  }
  .backLogin{
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    background: white;
    font-size: 0.12rem;
    text-align: center;
    color: #4097ff;
    margin-top: 0.05rem;
  }
  .save-btn {
    margin-top: 0.2rem;
  }
</style>
